<script setup>
import {ref, watchEffect} from 'vue'
import { CScrollbar } from 'c-scrollbar'

// 定义父组件传来的参数
const props = defineProps({
  kind: { // 多个下拉列表的不同标识
    type: Number,
    required: false,
    default: 1
  },
  selList: { // 下拉列表数据
    type: Array,
    required: false,
    default: []
  },
  inboxed: { // 是否跟随界面滚动
    type: Boolean,
    required: true,
    default: false
  },
  curName: {
    type: String,
    default: ''
  },
  preName: {
    type: String,
    default: ''
  }
})

const curName = ref('')
watchEffect(() => {
  curName.value = props.curName
})

// emits 定义调用父级方法
const emits = defineEmits(['setValue', 'selByKey'])

const selShow = ref(false)
// showSelect 显示下拉框
const showSelect = () => {
  selShow.value = true
}
// hideSelect 隐藏下拉框
const hideSelect = () => {
  selShow.value = false
}
// setSel 调用父组件的查询接口
const setSel = () => {
  emits('selByKey', curName.value, props.kind)
}

// setValue 赋值
const setValue = (cur) => {
  emits('setValue', cur, props.kind)
}
</script>

<template>
  <div :class="[inboxed ? 'sel-a' : '']">
    <input type="text" v-model="curName" :placeholder="'请选择'+preName" class="ipt" @focus="showSelect()" @blur="hideSelect()" @keyup.enter="setSel()" />
    <transition name="fade-mod" appear>
      <div class="sel-b" v-show="selShow">
        <div class="sel-c">
          <c-scrollbar>
            <div class="sel-d dan" v-for="curSel in selList" :key="curSel.selId" @click="setValue(curSel)">{{curSel.selName}}[{{curSel.selCode}}]</div>
          </c-scrollbar>
        </div>
      </div>
    </transition>
  </div>
</template>

<style scoped>
.sel-a {width: 240px; position: relative;}
.sel-b {position: absolute; z-index: 4;}
.sel-c {min-width: 230px; height: 200px; overflow: hidden; background-color: #FFF; box-shadow: 0 2px 3px #999;}
.sel-d {height: 40px; line-height: 40px; padding: 0 20px; border-bottom: 1px solid #EEE; cursor: pointer;}
.sel-d:hover {background-color: #E9EEF2;}
</style>
